<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js"></script>
  </head>

  <body>
    <!-- 只做演示不做细节处理 -->
     <div class="player-card">
      <div class="album-art-container">
        <img src="../public/img/1.jpg" alt="作者" />
      </div>

      <div class="track-info">
        <h1>歌曲名</h1>
        <p>作者</p>
      </div>

      <div class="progress-area">
        <div class="progress-bar-container" id="progress-bar-container">
          <div class="progress-bar" id="progress-bar"></div>
        </div>
        <div class="time-stamps">
          <span id="current-time">00:00</span>
          <span id="total-duration">00:00</span>
        </div>
      </div>

      <div class="controls">
        <button class="control-btn" id="prev-btn">
          <svg viewBox="0 0 24 24"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"></path></svg>
        </button>
        <button class="control-btn play-pause-btn" id="play-pause-btn">
          <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
        </button>
        <button class="control-btn" id="next-btn">
          <svg viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"></path></svg>
        </button>
      </div>
       <audio id="audio" src="../public/audio/1.mp3"></audio>
  </body>
</html>
